<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap基本的表格</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">

</head>
<body>

<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
    <th>名称</th>
    <th>城市</th>
</tr>
</thead>
<tbody>
<tr>
    <td>Tanmay</td>
    <td>Bangalore</td>
</tr>
<tr>
    <td>Sachin</td>
    <td>Mumbai</td>
</tr>
</tbody></table>



<table class="table table-striped">
    <caption>条纹表格布局</caption>
    <thead>
    <tr>
        <th>名称</th>
        <th>城市</th>
        <th>密码</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>560001</td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>400003</td>
    </tr>
    <tr>
        <td>Uma</td>
        <td>Pune</td>
        <td>411027</td>
    </tr>
    </tbody>
</table>

<table class="table table-bordered">
    <caption>边框表格布局</caption>
    <thead>
    <tr>
        <th>名称</th>
        <th>城市</th>
        <th>密码</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>560001</td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>400003</td>
    </tr>
    <tr>
        <td>Uma</td>
        <td>Pune</td>
        <td>411027</td>
    </tr>
    </tbody>
</table>


<table class="table table-hover">
    <caption>悬停表格布局</caption>
    <thead>
    <tr>
        <th>名称</th>
        <th>城市</th>
        <th>密码</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>560001</td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>400003</td>
    </tr>
    <tr>
        <td>Uma</td>
        <td>Pune</td>
        <td>411027</td>
    </tr>
    </tbody>
</table>

<table class="table table-condensed">
    <caption>精简表格布局</caption>
    <thead>
    <tr>
        <th>名称</th>
        <th>城市</th>
        <th>密码</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>560001</td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>400003</td>
    </tr>
    <tr>
        <td>Uma</td>
        <td>Pune</td>
        <td>411027</td>
    </tr>
    </tbody>
</table>



<body><table class="table">
    <caption>上下文表格布局</caption>
    <thead>
    <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr class="active">
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td>
    </tr>
    <tr class="success">
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td>
    </tr>
    <tr  class="warning">
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td>
    </tr>
    <tr  class="danger">
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td>
    </tr>
    <tr  class="info">
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td>
    </tr>
    </tbody>
</table>

<div class="table-responsive">
    <table class="table">
        <caption>响应式表格布局</caption>
        <thead>
        <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>产品1</td>
            <td>23/11/2013</td>
            <td>待发货</td>
        </tr>
        <tr>
            <td>产品2</td>
            <td>10/11/2013</td>
            <td>发货中</td>
        </tr>
        <tr>
            <td>产品3</td>
            <td>20/10/2013</td>
            <td>待确认</td>
        </tr>
        <tr>
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>
</html>